<template>
  <el-card class="jvm-card" shadow="never">
    <template #header>
      <div class="card-header">
        <el-icon><CoffeeCup /></el-icon>
        <span class="card-title-text">JVM 信息</span>
      </div>
    </template>

    <!-- JVM 内存使用率 -->
    <div class="memory-usage">
      <div class="usage-header">
        <div class="usage-title">内存使用率</div>
        <div class="usage-percent">{{ jvmMemoryUsagePercentage }}%</div>
      </div>
      <el-progress
        :percentage="jvmMemoryUsagePercentage"
        :stroke-width="10"
        :color="getProgressColor(jvmMemoryUsagePercentage)"
        :show-text="false"
      />
      <div class="usage-desc">
        {{ formatFileSize(jvm.usedMemory) }} / {{ formatFileSize(jvm.maxMemory) }}
      </div>
    </div>

    <el-divider />

    <!-- 其他 JVM 关键指标 -->
    <div class="jvm-stats-grid">
      <div class="stat-item">
        <div class="stat-value">{{ formatUptime(jvm.uptime) }}</div>
        <div class="stat-label">运行时长</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ jvm.threadCount }}</div>
        <div class="stat-label">当前线程</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ jvm.peakThreadCount }}</div>
        <div class="stat-label">峰值线程</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ jvm.loadedClassCount }}</div>
        <div class="stat-label">已加载类</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ jvm.gcCount }}</div>
        <div class="stat-label">GC 次数</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ jvm.gcTime }} ms</div>
        <div class="stat-label">GC 耗时</div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { computed } from 'vue'
import { ElCard, ElProgress, ElIcon, ElDivider } from 'element-plus'
import { CoffeeCup } from '@element-plus/icons-vue'
import { formatFileSize } from '@/utils/format'

/**
 * 定义组件的 props
 * @param {Object} jvm - 包含 JVM 信息的对象
 */
const props = defineProps({
  jvm: {
    type: Object,
    required: true,
    default: () => ({}),
  },
})

/**
 * 计算 JVM 内存使用率
 */
const jvmMemoryUsagePercentage = computed(() => {
  if (!props.jvm?.maxMemory) return 0
  return parseFloat(((props.jvm.usedMemory / props.jvm.maxMemory) * 100).toFixed(2))
})

/**
 * 根据使用率返回不同的进度条颜色
 */
const getProgressColor = (percentage) => {
  if (percentage > 90) return 'var(--el-color-error)'
  if (percentage > 70) return 'var(--el-color-warning)'
  return 'var(--el-color-primary)'
}

/**
 * 格式化 JVM 运行时长（毫秒转为可读格式）
 */
const formatUptime = (ms) => {
  if (!ms) return 'N/A'
  const seconds = Math.floor(ms / 1000)
  const d = Math.floor(seconds / (3600 * 24))
  const h = Math.floor((seconds % (3600 * 24)) / 3600)
  const m = Math.floor((seconds % 3600) / 60)

  let result = ''
  if (d > 0) result += `${d}天`
  if (h > 0) result += `${h}时`
  if (m > 0 || (d === 0 && h === 0)) result += `${m}分`

  return result.trim() || '小于1分钟'
}
</script>

<style lang="scss" scoped>
@use '@/assets/styles/mixins.scss' as *;

.card-header {
  @include flex($align: center);
  font-weight: 500;
  .card-title-text {
    margin-left: 8px;
  }
}

.memory-usage {
  .usage-header {
    @include flex-between;
    align-items: baseline;
    margin-bottom: 8px;
  }
  .usage-title {
    font-size: 15px;
    color: var(--el-text-color-primary);
  }
  .usage-percent {
    font-size: 18px;
    font-weight: bold;
    color: var(--el-color-primary);
    font-family: 'Courier New', Courier, monospace;
  }
  .usage-desc {
    font-size: 13px;
    color: var(--el-text-color-secondary);
    margin-top: 8px;
    font-family: 'Courier New', Courier, monospace;
  }
}

.jvm-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}

.stat-item {
  .stat-value {
    font-size: 18px;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
  }
  .stat-label {
    font-size: 13px;
    color: var(--el-text-color-secondary);
    margin-top: 6px;
  }
}

.el-divider {
  margin: 16px 0;
}
</style>
